<template>
  <div class="fl rmain">
    <div class="t">
      <span>垃圾焚烧监督</span>
      <span class="fr">
        <span style="background-color: skyblue;border-radius: 30px;padding: 2px 10px 2px 10px;">环比</span>
        <span style="background-color: skyblue;">今日</span>
        <span>本月</span>
      </span>
    </div>

    <div class="rmain-b">

      <div class="b-top">
        <p class="p">
          焚烧厂运行监督
          <span class="fr">
            <i>
              <img src="../../assets/ganshiao-img/警报管理.png" />
            </i>
            当前预警：废气排放超标
          </span>
        </p>
        <div class="b-top-top">
          <ul>
            <li class="m-li">
              <p style="border-top: 2px solid #6D2D3A;background-color: #282424;">2000吨</p>
              <p class="font-s">今日接受量</p>
              <p style="border-bottom: 2px solid #6D2D3A;background-color: #282424;">
                <i>
                  <img src="../../assets/ganshiao-img/下降.png" />
                </i>
                7%
              </p>
            </li>
            <li class="m-li">
              <p style="border-top: 2px solid #287D59;background-color: #203738;">1510吨</p>
              <p class="font-s">垃圾处置量</p>
              <p style="border-bottom: 2px solid #287D59;background-color: #203738;">
                <i>
                  <img src="../../assets/ganshiao-img/上升.png" />
                </i>
                1.5%
              </p>
            </li>
            <li class="m-li">
              <p style="border-top: 2px solid #287D59;background-color: #203738;">90%</p>
              <p class="font-s">处置率</p>
              <p style="border-bottom: 2px solid #287D59;background-color: #203738;">
                <i>
                  <img src="../../assets/ganshiao-img/上升.png" />
                </i>
                7.5%
              </p>
            </li>
            <li class="m-li">
              <p style="border-top: 2px solid #6D2D3A;background-color: #282424;">5.2万度</p>
              <p class="font-s">今日发电</p>
              <p style="border-bottom: 2px solid #6D2D3A;background-color: #282424;">
                <i>
                  <img src="../../assets/ganshiao-img/下降.png" />
                </i>
                1.5%
              </p>
            </li>
          </ul>
        </div>
      </div>

      <div class="b-main">
        <p class="p">
          焚烧厂环境预警
        </p>
        <div class="b-main-main">
          <ul>
            <li class="m-li">
              <p>1.0次</p>
              <p class="font-s">异味超标</p>
            </li>
            <li class="m-li">
              <p>2次</p>
              <p class="font-s">渗滤液超标</p>
            </li>
            <li class="m-li">
              <p>0次</p>
              <p class="font-s">废水排放超标</p>
            </li>
            <li class="m-li">
              <p>1次</p>
              <p class="font-s">废气排放超标</p>
            </li>
          </ul>
        </div>

      </div>

      <div class="b-buttom">
        <p class="p">
          焚烧厂能耗
        </p>
        <div class="b-buttom-b"></div>
        <ul>
          <li class="m-li">
            <p>
              500吨
              <span style="font-size: 10px;">
                <i>
                  <img src="../../assets/ganshiao-img/下.png" />
                </i>
                10%
              </span>
            </p>
            <p class="font-s">用水</p>
          </li>
          <li class="m-li">
            <p>
              2000度
              <span style="font-size: 10px;">
                <i>
                  <img src="../../assets/ganshiao-img/下.png" />
                </i>
                27%
              </span>
            </p>
            <p class="font-s">用电</p>
          </li>
          <li class="m-li">
            <p>
              800m³
              <span style="font-size: 10px;">
                <i>
                  <img src="../../assets/ganshiao-img/下.png" />
                </i>
                10%
              </span>
            </p>
            <p class="font-s">用天然气</p>
          </li>
          <li class="m-li">
            <p>
              0.1万元
              <span style="font-size: 10px;">
                <i>
                  <img src="../../assets/ganshiao-img/下.png" />
                </i>
                7%
              </span>
            </p>
            <p class="font-s">设备维护费用</p>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    components: {},
    mounted() {},
    methods: {}
  }
</script>
<style>
  .rmain {
    margin-left: 77%;
    margin-top: 5%;
    width: 15%;
  }

  .rmain-b {
    margin-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 80px;
    font-size: 14px;
    background-color: #232D39;
    opacity: 0.9;
  }

  .p {
    font-size: 18px;
    padding-top: 5%;
  }



  .b-top p span {
    font-size: 10px;
  }

  .b-top-top ul li p {
    padding: 1px;
    text-align: center;
  }

  .font-s {
    font-size: 10px;
  }

  .b-main {
    position: relative;
    top: 10px;
  }


  .m-li {
    font-size: 13px;
    padding-left: 4%;
    padding-right: 4%;
    margin-top: 7px;
    margin-bottom: 7px;
    width: 17%;
    display: block;
    float: left;
  }

  .m-li p {
    padding-bottom: 5px;
  }

  .b-buttom {
    position: relative;
    top: 10px;
  }

  .b-buttom-b {
    padding: 1px;
  }
</style>
